<template>
	<view class="container" :class="skinStyle">
		<!--header-->
<!-- 		<view class="search-header-box">
			<view class="search-header">
				<view class="search-searchbox">
					<view class="iconfont iconsousuohome" @tap="search"></view>
					<input class="search-input" v-model="searchKey" focus
					 confirm-type="search" @confirm="getProductList({size:10,num:1})"></input>
					<view class="search-clear iconfont iconguanbi1" v-if="searchKey"
					@tap="searchKeyFun"></view>
				</view>
				<view class="search-text" @tap="getProductList({size:10,num:1})">搜索</view>
			</view>
		</view> -->
		<view class="home-headers search-pos" v-if="!ccId">
			<view class="home-search">
				<view class="iconfont iconsousuohome"></view>
				<input class="search-input" v-model="searchKey" focus
				 confirm-type="search" @confirm="getProductList({size:10,num:1})"></input>
				<view class="search-clear iconfont iconguanbi1" v-if="searchKey"
				@tap="searchKeyFun"></view>
			</view>
		</view>
		<view class="productList-wrap" v-if="!ccId">
		<!-- 产品列表 -->
		<mescroll-body
			ref="mescrollRef" 
			@init="mescrollInit" 
			@down="downCallback"
			:up="upOption" 
			@up="getProductList"
			:fixed="true"
			:top="90"
		>
			<!-- 分类 -->
			<view class="category-wrap">
				<view class="category-con">
					<view class="category-goods" :class="{'ccItem':ccId}" v-for="(item,index) in goodsList"
					:key="index"
					@tap="goGoodsDetail(item)">
						<view class="image-box" v-if="!ccId">
							<!-- <image :src="imgSrc+item.productThumbnailImageHdUrl" mode="aspectFit"></image> -->
							<template v-if="item.productThumbnailImageHdUrl.indexOf('http') > -1">
								<image mode="aspectFill" :src="item.productThumbnailImageHdUrl"></image>
							</template>
							<template v-else>
								<image mode="aspectFill" :src="imgSrc+item.productThumbnailImageHdUrl"></image>
							</template>
						</view>
						<view class="image-box-cc"  v-else>
							<template >
								<image mode="aspectFill" :src="imgSrc+item.productThumbnailImageUrl"></image>
							</template>
						</view>
						<view class="image-text">
							<view class="goods-title" v-if="!ccId">{{item.productName}}</view>
							<view class="goods-title" v-else>{{item.name}}</view>
							<view class="goods-price">￥{{item.productDiscountPrice?item.productDiscountPrice:0}}</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		</view>
		<view class="productList-wrap" v-else>
		<!-- 产品列表 -->
		<mescroll-body
			ref="mescrollRef" 
			@init="mescrollInit" 
			@down="downCallback"
			:up="upOption" 
			@up="getProductList"
			:fixed="true"
		>
			<!-- 分类 -->
			<view class="category-wrap">
				<view class="category-con">
					<view class="category-goods" :class="{'ccItem':ccId}" v-for="(item,index) in goodsList"
					:key="index"
					@tap="goGoodsDetail(item)">
						<view class="image-box" v-if="!ccId">
							<!-- <image :src="imgSrc+item.productThumbnailImageHdUrl" mode="aspectFit"></image> -->
							<template v-if="item.productThumbnailImageHdUrl.indexOf('http') > -1">
								<image mode="aspectFill" :src="item.productThumbnailImageHdUrl"></image>
							</template>
							<template v-else>
								<image mode="aspectFill" :src="imgSrc+item.productThumbnailImageHdUrl"></image>
							</template>
						</view>
						<view class="image-box-cc"  v-else>
							<template >
								<image mode="aspectFill" :src="imgSrc+item.productThumbnailImageUrl"></image>
							</template>
						</view>
						<view class="image-text">
							<view class="goods-title" v-if="!ccId">{{item.productName}}</view>
							<view class="goods-title" v-else>{{item.name}}</view>
							<view class="goods-price">￥{{item.productDiscountPrice?item.productDiscountPrice:0}}</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		</view>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	
	import footBar from "@/components/footbar/footbar"
	import mixin from "@/utils/mixin.js"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins:[mixin,MescrollMixin],
		components: {
			footBar,
		},
		data() {
			return {
				imgSrc: this.$store.state.imgUrl,
				selectedIndex:0,
				searchKey: "", //搜索关键词
				goodsList: [],
				upOption:{
					auto: false, // 不自动加载
					page: {
					 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					 	size: 10 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				},
				ccId:null,
			}
		},
		onLoad(options){
			// #ifdef H5
			   this.$wechat.noShare();
			// #endif
			if(options){
				this.selectedIndex=options.selectedIndex;
				if(options.ccId){
					this.ccId = options.ccId
				}
			}
			
		},
		methods: {
			//商品列表
			getProductList(page) {
				if(this.ccId){
					let params={
						type:0,
						ccId:this.ccId,
					};
				this.$http.getCouponProduct(params).then((res) => {
					if (res.status === 0) {
						let curPageData =res.data;
						this.mescroll.endSuccess(res.data.length);
						if (page.num == 1) {
							this.goodsList = []
						};
						this.goodsList = this.goodsList.concat(curPageData);
						console.log(this.goodsList)
					}
				}).catch(() => {
					this.mescroll.endErr()
				});	
				}else{
					let params={
										current:page.num,
										pageSize:page.size,
										subCategoryId:'',
										productName:this.searchKey
									};
					this.$http.getProductList(params).then((res) => {
					if (res.status === 0) {
						let curPageData =res.data.records;
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.goodsList = []
						};
						this.goodsList = this.goodsList.concat(curPageData);
						console.log(this.goodsList)
					}
				}).catch(() => {
					this.mescroll.endErr()
				});
				}
				
			},
			
			recordsIcon(){
				this.recordsList=[]
			},
			//搜索框输入
			searchKeyFun(){
				this.searchKey=''
			},
			goGoodsDetail(item) {
				if(this.ccId){
					if(item.productType==1){
						uni.navigateTo({
							url: `../goodsDetails/goodsDetails?productId=${item.id}&specificationId=${item.specificationId}`
						})
					}else{
						uni.navigateTo({
							url: `../goodsDetails/goodsDetails?suitId=${item.id}`
						})
					}
					
					
				} else {
					uni.navigateTo({
						url: `../goodsDetails/goodsDetails?productId=${item.productId}`
					})
				}
				
				
			}
		},
	}
</script>

<style lang="scss">
	.ccItem{
		height: 482rpx !important;
	}
	.image-box-cc{
		width: 100%;
		height:322rpx;
		margin-bottom: 8rpx;
		overflow: hidden;
		border-radius:8rpx;
		image{
			width: 100%;
			height: 100%;
			// object-fit:cover;
		}
	}
	.container {
		padding-bottom: env(safe-area-inset-bottom);
		min-height: 100vh;
	}
	
	.historicRecords,.changeSearch{
		margin-top: 60rpx;
		padding: 60rpx 40rpx 80rpx 40rpx;
		background-color: #FFFFFF;
		color: #333333;
		// border-radius:0 0 50rpx 50rpx;
	}
	.changeSearch{
		padding: 20rpx 40rpx;
	}
	.recordsHeader{
		display: flex;
		justify-content: space-between;
	}
	.recordsContent{
		padding-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}
	.records{
		font-size: 28rpx;
		border: 1px solid $borderColor;
		color: #333333;
		border-radius: 50rpx;
		margin: 10rpx 20rpx 10rpx 0;
		padding: 2rpx 20rpx;
		background-color: $borderColor;
	}
	.changeW{
		font-size: 28rpx;
		border-bottom: 1rpx solid $borderColor;
		padding: 20rpx 10rpx;
	}
	.parase-content {
		color: #333;
		font-size: 28rpx;
		// text-align: center;
		// display: flex;
	}
	.parase-content .em{
		color: #E94732 !important;
	}
	/* 隐藏scroll-view滚动条*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}
	.search-header-box {
		width: 100%;
		background: #fff;
		position: fixed;
		z-index: 99998;
		left: 0;
		top: 0;
		border-bottom: 2rpx solid $borderColor;
		padding:10rpx 20rpx;
	}
	.search-header {
		display: flex;
		align-items: center;
	}
	.search-searchbox {
		flex: 1;
		height: 70rpx;
		border-radius: 80rpx;
		font-size: 24rpx;
		// background: $borderColor;
		border:2rpx solid $themeColor1;
		padding: 6rpx 20rpx;
		box-sizing: border-box;
		color: #999;
		display: flex;
		align-items: center;
		overflow: hidden;
	}
	.search-input {
		text-align: left !important;
		margin-left: 12rpx;
		width: 100% !important;
		background-color: #fff !important;
		color:#121212;
		font-size: 28rpx;
		.uni-input-input {
			width: 100%;
			font-size: 30rpx;
		}
	}
	
	.search-text {
		font-size: 32rpx;
		color: #444;
		margin: 0 20rpx 0 30rpx;
		color: $red;
	}
	.search-search-text {
		padding-left: 16rpx;
	}
	.search-search-key {
		max-width: 80%;
		height: 100%;
		padding: 0 16rpx;
		margin-left: 12rpx;
		display: flex;
		align-items: center;
		border-radius: 15px;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
	}
	.search-key-text {
		box-sizing: border-box;
		padding-right: 12rpx;
		font-size: 12px;
		line-height: 12px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.search-clear{
		padding:10rpx;
	}
	
.productList-wrap{
	width: 100%;
	padding:10rpx 20rpx;
	.category-wrap{
		padding:0 5rpx;
	}
	.category-con{
		width:100%;
	}
	.category-goods{
		width:calc(50% - 24rpx);
		height: 400rpx;
		float:left;
		background-color: #fff;
		box-shadow: 0rpx 4rpx 24rpx 0px rgba(143, 97, 95, 0.1);
		border-radius:18rpx;
		box-sizing: border-box;
		padding:16rpx 16rpx 24rpx;
		margin:20rpx 12rpx 0rpx;
		// &:nth-child(2n+1){
			
		// }
		// &:nth-child(2n){
		// 	margin:20rpx 0 0rpx 1%;
		// }
		.image-box{
			width: 100%;
			height:232rpx;
			margin-bottom: 8rpx;
			overflow: hidden;
			border-radius:8rpx;
			image{
				width: 100%;
				height: 100%;
				// object-fit:cover;
				
			}
		}
		.image-text{
			padding:0 4rpx;
			.goods-title{
				color:#121212;
				font-size: 26rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				height: 80rpx;
				line-height: 42rpx;
				margin:8rpx 0;
			}
			.goods-subtitle{
				font-size: 22rpx;
				color:#121212;
				height: 44rpx;
			}
			.goods-price{
				color: #E8374A;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
		
	}
}
	
	
	
</style>
